<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员登录界面</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-2.1.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<div id="wrap">
    <div class="leftMeun" id="leftMeun">
        <div id="logoDiv">
            <p id="logoP">
                <span>管理员</span>
            </p>
        </div>

        <div class="meun-title">菜单</div>
        <div class="meun-item" href="#user" aria-controls="user" role="tab" data-toggle="tab">学生管理</div>
        <div class="meun-item " href="#teacher" aria-controls="teacher" role="tab" data-toggle="tab">教师管理</div>
        <div class="meun-item" href="#chan" aria-controls="chan" role="tab" data-toggle="tab">修改密码</div>

    </div>

    <div id="rightContent" >
        <a class="toggle-btn" id="nimei">
            <i class="glyphicon glyphicon-align-justify"></i>
        </a>





        <div class="tab-content" >
            <div style="position: absolute;right: 20px;top: 10px;font-size: 20px;color: #8a6d3b;z-index: 999">admin,欢迎登陆</div>

            <!--学生面板-->
            <div role="tabpanel" class="tab-pane active" id="user" >
                <div class="check-div" style="text-align: center;font-size: 40px;position: relative">
                    学生信息
                </div>

                <div class="data-div">
                    <div class="row tableHeader">
                        <div class="col-xs-2 ">
                            学号
                        </div>
                        <div class="col-xs-2">
                            姓名
                        </div>
                        <div class="col-xs-2">
                            班级
                        </div>
                        <div class="col-xs-2">
                            性别
                        </div>

                        <div class="col-xs-2">
                          年龄
                        </div>
                        <div class="col-xs-2">
                            操作
                        </div>
                    </div>
                    <div class="tablebody">
                        <div class="row">
                            <div class="col-xs-2 ">
                                wwz
                            </div>
                            <div class="col-xs-2">
                                地区
                            </div>
                            <div class="col-xs-2">
                                哈哈
                            </div>
                            <div class="col-xs-2">
                                13700000000
                            </div>
                            <div class="col-xs-2">
                                状态
                            </div>
                            <div class="col-xs-2">
                                <button class="btn btn-success btn-xs" data-toggle="modal" data-target="#reviseUser">修改</button>
                                <button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteUser">删除</button>
                                <button class="btn btn-warning btn-xs" data-toggle="modal" data-target="#deleteUser">查看详细信息</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!--教师面板-->
            <div role="tabpanel" class="tab-pane" id="teacher">
                <div class="check-div" style="text-align: center;font-size: 40px">
                    教师信息
                </div>

                <div class="data-div">
                    <div class="row tableHeader">
                        <div class="col-xs-2 ">
                            用户名
                        </div>
                        <div class="col-xs-2">
                            地区
                        </div>
                        <div class="col-xs-2">
                            真实姓名
                        </div>
                        <div class="col-xs-2">
                            电话
                        </div>
                        <div class="col-xs-2">
                            状态
                        </div>
                        <div class="col-xs-2">
                            操作
                        </div>
                    </div>
                    <div class="tablebody">
                        <div class="row">
                            <div class="col-xs-2 ">
                                wwz
                            </div>
                            <div class="col-xs-2">
                                地区
                            </div>
                            <div class="col-xs-2">
                                哈哈
                            </div>
                            <div class="col-xs-2">
                                13700000000
                            </div>
                            <div class="col-xs-2">
                                状态
                            </div>
                            <div class="col-xs-2">
                                <button class="btn btn-success btn-xs" data-toggle="modal" data-target="#reviseUser">修改</button>
                                <button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteUser">删除</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!--修改密码面板-->
            <div role="tabpanel" class="tab-pane" id="chan">
                <div class="check-div" style="text-align: center;font-size: 40px">
                    修改密码
                </div>
                <div style="padding: 50px 0;margin-top: 50px;background-color: #fff; text-align: right;width: 420px;margin: 50px auto;">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="sKnot" class="col-xs-4 control-label">原密码：</label>
                            <div class="col-xs-5">
                                <input type="" class="form-control input-sm duiqi" id="sKnot" placeholder="" style="margin-top: 7px;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sKnot" class="col-xs-4 control-label">新密码：</label>
                            <div class="col-xs-5">
                                <input type="" class="form-control input-sm duiqi" id="sKnot" placeholder="" style="margin-top: 7px;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sKnot" class="col-xs-4 control-label">重复密码：</label>
                            <div class="col-xs-5">
                                <input type="" class="form-control input-sm duiqi" id="sKnot" placeholder="" style="margin-top: 7px;">
                            </div>
                        </div>
                        <div class="form-group text-right">
                            <div class="col-xs-offset-4 col-xs-5" style="margin-left: 169px;">
                                <button type="reset" class="btn btn-xs btn-white">取 消</button>
                                <button type="submit" class="btn btn-xs btn-green">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
<script>
    $(function () {
        $(".meun-item").click(function () {
            $(".meun-item").removeClass("meun-item-active");
            $(this).addClass("meun-item-active");
        });

        $(".toggle-btn").click(function () {
            $("#leftMeun").toggleClass("show");
            $("#rightContent").toggleClass("pd0px");
        })
    })
</script>


<style type="text/css">

    body {
        min-width: 100%;
        height: auto
    }


    #wrap {
        min-width: 100%;
        position: absolute;
        background: #eff3f6 bottom;
        min-height: 100%;
        overflow: hidden
    }

    .leftMeun {
        position: absolute;
        box-sizing: border-box;
        width: 200px;
        height: 100%;
        background: #4d5e70 bottom
    }

    .leftMeun > div {
        padding-left: 20px
    }

    #rightContent {
        box-sizing: border-box;
        float: left;
        box-sizing: border-box;
        padding-left: 200px;
        overflow-y: overlay;
        overflow-x: hidden;
        clear: both;
        color: #717592;
        min-width: 100%;
        min-height: 500px
    }

    #logoDiv {
        padding-top: 20px;
        padding-bottom: 20px;
        height: 70px;
        background-color: #354457;
        font-size: 17px;
        color: #fff;
        vertical-align: bottom
    }

    .meun-title {
        color: #828e9a;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 16px;
        font-weight: 700
    }

    .meun-item {
        line-height: 40px;
        height: 40px;
        color: #aab1b7;
        cursor: pointer
    }

    .meun-item a {
        color: #aab1b7;
        display: block
    }

    .meun-item-active a {
        color: #c4c7cc;
        display: block
    }

    .meun-item img {
        padding-right: 8px;
        height: 20px
    }

    .meun-item-active {
        background-color: deepskyblue;
        border-right: 4px solid #647f9d;
        color: #fff
    }

    .check-div {
        height: 70px;
        line-height: 70px;
        *line-height: 60px;
        background-color: #fff;
        padding-left: 30px;
        min-width: 824px !important;
        box-sizing: border-box
    }

    .tab-pane {
        color: #9095ab
    }


    .toggle-btn {
        display: none;
        width: 52px;
        height: 50px;
        font-size: 20px;
        padding: 15px;
        cursor: pointer;
        float: left;
        color: #212121;
        -moz-transition: all .2s ease-out 0s;
        -webkit-transition: all .2s ease-out 0s;
        transition: all .2s ease-out 0s
    }

    .tableHeader {
        height: 35px;
        line-height: 35px;
        font-size: 20px;
        font-weight: bold;
        font-weight: 700;
        color: #646987;
        background-color: #e3e8ee;
        padding: 0 30px;
        text-align: left
    }

    .tablebody {
        margin: 20px 30px;
        text-align: left
    }

    .tablebody .row {
        margin-top: 10px;
        background-color: #fff;
        height: 70px;
        line-height: 70px
    }

    .pd0px {
        padding-left: 200px !important
    }

    /*屏幕宽度小于1123px时的样式*/
    @media(max-width:1123px) {
        #rightContent {
            padding-left: 0
        }

        .tab-pane {
            min-width: 973px
        }

        .leftMeun {
            display: none
        }

        .toggle-btn {
            display: block
        }
    }

    .btn-white {
        background: #fff;
        border: 1px solid #ccc !important;
        font-weight: 400 !important;
        margin-right: 10px
    }

    .btn-green {
        border: 1px solid #ccc !important;
        font-weight: 400 !important;
        margin-right: 10px;
        color: #fff;
        background: #529373
    }

    .duiqi {
        margin-left: -26px !important;
        margin-top: 7px;
        width: 200px !important
    }

    .form-horizontal .form-group {
        margin-right: -100px !important
    }

</style>
</body>
</html>
